<template>
  <div class="container mx-auto p-6">
    <div v-if="loading">正在跳转…</div>
    <div v-else-if="error" class="text-red-600">{{ error }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  const key = route.params.key
  try {
    const res = await $fetch(`/api/shortlink/${key}`)
    const url = res.url
    if (url) {
      // use replace to avoid back button landing here
      window.location.replace(url)
      return
    }
    error.value = '未找到目标链接'
  } catch (e) {
    // avoid TS annotations in plain <script setup>
    const err = e
    error.value = err?.statusMessage || err?.message || '跳转失败'
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.container { max-width: 800px }
</style>
